<div class="mp">

  <div>
    <h3>{{tip}}</h3>
    <div class="header">
      <label style="width:auto " >Category List:</label>
      <ul *ngFor="let item of categorys">
        <a (click)="getAllRecord(item.category_ID)" >{{item.name}}</a>
      </ul>
    </div>
    <div class="mp" style="margin: 10px">
      <a [routerLink]="['/add']">Add Book</a>
    </div>
    <table class="gridtable">
      <thead>
      <tr>
        <td>id</td>
        <td>title</td>
        <td>author</td>
        <td>price</td>
        <td>description</td>
        <td>category</td>
        <td>operate</td>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let book of books">
        <td>{{book.book_ID}}</td>
        <td>{{book.title}}</td>
        <td>{{book.author}}</td>
        <td>{{book.price}}</td>
        <td>{{book.description}}</td>
        <td>{{book.name}}</td>
        <td>
          <button>  <a [routerLink]="['/update']" [queryParams]="book">UPDATE</a></button>
          <button (click)="removeBook(book.book_ID)">REMOVE</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

<router-outlet></router-outlet>
